@import "../../theme";
.home{
  position: relative;
  height: 100%;
  .layerControl{
    position: fixed;
    right: 0;
    bottom: 10px;
    z-index: 499;
  }
}
#map {
  width: 100%;
  height: 100%;
}
.mapIcon{
  width: 86px;
  height: 60px;
  cursor: pointer;
  background-position: 0 -120px;
  background-repeat: no-repeat;
  background-image: url("../../assets/images/mapType.jpg");
  border: 1px @primary-color solid;
  transition: all .5s ease;
  span{
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    padding: 0 3px;
    background: @primary-color;
  }
}
.mapIcon1{
  background-position: 0 -60px;
}
.mapIcon2{
  background-position: 0 0;
}
.layerArea{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 86px;
  height: 60px;
  transition: all .5s ease;
  .mapIcon{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.layerChosen{
  position: relative;
  z-index: 500;
  .mapIcon{
    position: absolute;
    right: 0;
    bottom: 0;
  }
}
.layerExpand{
  .layerArea{
    width: 265px;
    z-index: 501;
  }
  .mapIcon1{
    right: 90px;
  }
  .mapIcon2{
    right: 180px;
  }
}